GORAGOD.com

freelance, web developer, web designer, hosting, domain name

การดักอีเวนต์ onsubmit ของฟอร์ม เมื่อ submit ฟอร์มด้วย Javascrip

เคยพบปัญหาว่า เราไม่สามารถ ตรวจสอบฟอร์มก่อนส่ง เมื่อเราใช้ Javascript ทำการซับมิตฟอร์มด้วย form.submit() หรือไม่ ถ้าไม่เข้าใจ ดูตัวอย่างเลย

<form name="frm_test" method="post" action="index.php" onsubmit="doSubmit(this)">
<input type="text" name="test">
<input type="submit" name="btn_submit" />
<input type="button" onclick="doTestClick()" value="Test Submit" />
</form>
<script type="text/javascript">
function doTestClick() {
    frm_test.submit(); // submit form ด้วย Javascript
};
function doSubmit(form) {
    alert(form.test.value);
};
</script>

จากโค้ดด้านบน หากเราทำการ Submit ด้วยการกดปุ่ม Submit ก็จะมีกรอบแจ้งข้อความใน text ออกมา อันเกิดจากการเข้าไปทำงานใน event onsubmit ตามปกติของฟอร์ม แต่ถ้าเราทำการ Submit ด้วยการกดปุ่ม Test Submit เพื่อไปเรียกฟังก์ชั่น submit() ของฟอร์ม เราจะไม่ได้รับข้อความใดๆ นั่นหมายถึง มันไม่ได้เข้าไปทำงานยังอีเว้นต์ onsubmit ของฟอร์มตามปกติ เอ...แล้วเราจะตรวจฟอร์มก่อนส่งได้ไงถ้าเราต้องตรวจฟอร์มในอีเว้นต์ onsubmit

ข้อเท็จจริงในกรณีนี้คือ event onsubmit ของฟอร์มเกิดเมื่อ ทำการกดปุ่ม submit ภายในฟอร์มครับ ไม่ได้เกิดจากเมื่อฟอร์มทำการ submit ดังนั้นการเรียกฟังก์ชั่น submit() ของฟอร์ม จึงไม่มีการเรียกอีเวนต์ onsubmit

การแก้ไขมี 2 กรณี
1. เมื่อไม่มีปุ่ม submit บนฟอร์ม และใช้ การ submit ด้วย Javascript เท่านั้น ก็ให้ทำการตรวจสอบฟอร์มให้เสร็จก่อน แล้วค่อยเรียกคำสั่ง submit() ของฟอร์ม
2. ใช้วิธีนี้

<form name="frm_test" method="post" action="index.php" onsubmit="doSubmit(this)">
<input type="text" name="test">
<input type="submit" name="btn_submit" />
<input type="button" onclick="doTestClick()" value="Test Submit" />
</form>
<script type="text/javascript">
function doTestClick() {
    frm_test.btn_submit.click(); // ไปจำลองการกดปุ่มบน ปุ่ม submit แทน
};
function doSubmit(form) {
    alert(form.test.value);
};
</script>

จะเห็นได้ว่า โค้ดด้านบนนี้ เราสามารถทำการ submit ได้ทั้ง 2 ทาง ไม่ว่าจะผ่านปุ่ม submit ตามปกติ หรือการเรียก Javascript ผ่านปุ่ม button และ หากเราต้องการฟอร์มที่ไม่เห็นปุ่ม submit เราก็อาจทำการซ่อนปุ่ม submit ไว้เลยก็ได้

<input type="submit" name="btn_submit" style="display:none" />

0SHAREFacebookLINE it!
^